<template>
	<div style="width: 1200px;display: flex;margin: auto;flex-direction: column;position: relative;">
		<div style="width: 1200px;display: flex;margin-bottom: 24px;padding-bottom: 24px;border-bottom: 1px solid #e0e0e0;justify-content: space-between;"
			v-for="(item, index) in houselist" :key="index">
			<div style="width: 300px;height: 200px;background-color: #aaaaaa26;border-radius: 10px;">
				<img :src="item.display_diagram ? item.display_diagram : $img + item.houseImageDiv"
					style="width: 100%;height: 100%;object-fit: contain;" />
			</div>
			<div style="width: 700px;display: flex;flex-direction: column;justify-content: space-between;">
				<div @click="details(item)"
					style="font-size: 24px;cursor: pointer;font-weight: 600;color: #333;display: -webkit-box;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;white-space: normal !important;-webkit-line-clamp: 2;-webkit-box-orient: vertical;">
					<tag-view :item='item'></tag-view>{{ item.title }}</div>
				<div style="font-size: 16px;color: #666666;margin-top: 12px;">{{ item.region }} {{ item.address }}</div>
				<div style="font-size: 16px;color: #666666;margin-top: 12px;">{{ item.house_type }} {{ item.AREA }}㎡
					{{ item.floor }}</div>
				<div style="flex-grow: 1;"></div>
				<div style="display: flex;width: 700px;align-items: center;">
					<img style="width: 31px;height: 31px;border-radius: 31px;cursor: pointer;"
						@click="toAgent(item.user_id)"
						:src="item.image ? item.image : 'https://pic.bangbangtongcheng.com/static/my/header.png'" />

					<div @click="toAgent(item.user_id)"
						style="color: #666666;font-size: 16px;max-width: 300px;margin: 0 10px;cursor: pointer;white-space: nowrap;overflow:hidden;text-overflow: ellipsis;">
						{{ item.nikeName || '未命名用户' }}</div>
					<div @click="shopdetails(item)"
						style="padding: 2px 5px;color: #64b6a8;border: #64b6a8 1px solid;border-radius: 4px;max-width: 240px;cursor: pointer;font-size: 16px;white-space: nowrap;overflow:hidden;text-overflow: ellipsis;">
						{{ item.shop_name }}</div>
				</div>
			</div>
			<div style="width: 160px;display: flex;flex-direction: column;align-items: flex-end;justify-content: center;">
				<div style="font-size: 30px;color: #e00000;" v-if="item.transaction_type == 1">{{ item.price }}元</div>
				<div style="font-size: 30px;color: #e00000;" v-if="item.transaction_type == 2">{{ item.price }}万</div>
				<div style="font-size: 16px;color: #333333;" v-if="item.transaction_type == 2">{{ ((item.price * 10000) /
					item.AREA).toFixed(2) }}元/㎡</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: 'houseList',
	props: ['houselist'],
	data() {
		return {
			houselist: []
		}
	},
	created() {
		this.houselist = this.houselist
	},
	methods: {
		details(item) {
			if (item.transaction_type == 1) {
				this.openUrl({
					path: "/index/leaseDetails",
					query: {
						id: item.id
					}
				});
			} else {
				this.openUrl({
					path: "/index/newHouseDetails",
					query: {
						id: item.id
					}
				});
			}
		},
		toAgent(id) {
			this.openUrl({
				path: "/index/goldConsultant",
				query: {
					id: id
				}
			});
		},
		shopdetails(item) {
			if (item.shop_name == '个人房源') {
				this.$message({
					message: "个人房源！",
					type: "error",
					offset: 120,
					duration: 2000,
				});
			} else {
				this.openUrl({
					path: "/index/ShopDetails",
					query: {
						id: item.shop_id
					}
				});
			}
		},
	}
}
</script>

<style lang="less" scoped></style>
